<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/community.css">
    <link rel="stylesheet" href="/css/editormd.preview.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1758372_iu83tgg8gw.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/js/community.js" type="application/javascript"></script>
    <script src="/js/moment.min.js" type="application/javascript"></script>
    <script src="/js/editormd.min.js" type="application/javascript"></script>
    <script src="/js/lib/marked.min.js"></script>
    <script src="/js/lib/prettify.min.js"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 page-left">
            <!--正文-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="question-AliLogo">
                    <i class="iconfont icon-heike question_ali_icon"></i>
                    <span th:text="${question.title}"></span>
                </h4>
                <span class="text-desc">
                author:<span th:text="${question.user.name}"></span>|
                view:<span th:text="${question.viewCount}"></span>|
                time:<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd')}"></span>
                </span>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--content-->

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 description_sty" id ="question-view">
                    <textarea style="display:none;" th:text="${question.description}"></textarea>

                </div>
                <script type="text/javascript">
                    $(function() {
                        editormd.markdownToHTML("question-view", {});
                    });
                </script>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--tag-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="label label-info question-tag" th:each="tag : ${question.tag.split(',')}">
                          <span class="glyphicon glyphicon-tags"></span>
                          <span class="label label-info" th:text="${tag}"></span>
                    </span>

                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--edit-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <a th:href="@{'/publish/' +${question.id}}" class="community-menu"
                       th:if="${session.user!=null && session.user.id==question.creator}">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true">edit</span>

                    </a>
                </div>

            </div>
            <!--回复列表-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="question-AliLogo">
                    <i class="iconfont icon-huifu question_ali_icon"></i>
                    <span class="answerNum" th:text="${question.commentCount}"></span> replies
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments" th:each="comment : ${comments}">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded" th:src="${comment.user.avatarUrl}">
                            </a>

                        </div>
                        <div class="media-body"th:id="${'comment-body-'+comment.id}">
                            <h5 class="media-heading">
                                <span th:text="${comment.user.name}"> </span>
                            </h5>
                            <div th:text="${comment.content}"></div>
                            <div class="menu">
                                 <span th:id="${'thumb-'+comment.id}" th:data-id="${comment.id+'/'+session.user.id+'/'+question.id}" onclick="thumbComments(this)" class="thumbComment-icon" th:if="${session.user!=null}">
                                      <span class="glyphicon glyphicon-thumbs-up icon"></span>
                                      <span id="thumbChildElement" th:text="${comment.likeCount}"></span>

                                 </span>


                                <span th:data-id="${comment.id}" onclick="collapseComments(this)" class="comment-icon">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    <span th:text="${comment.commentCount}"></span>

                                </span>
                                <span class="pull-right"
                                      th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd')}"></span>
                            </div>
                            <!--二级评论-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments" th:id="${'comment-'+comment.id}">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input type="text" class="form-control" placeholder="Please reply in here...."th:id="${'input-'+ comment.id}">
                                    <button type="button" class="btn btn-success pull-right" onclick="comment(this)"th:data-id="${comment.id}">Reply</button>
                                </div>
                            </div>




                        </div>
                    </div>

                </div>
            </div>
            <!--收藏-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 starDiv" th:if="${session.user!=null}">
                <h4 class="question-AliLogo">
                    <span th:id="${question.id}" th:class="${starFlag == true?'glyphicon glyphicon-star active':'glyphicon glyphicon-star'}" onclick="star(this)"></span>
                    Star
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="question-AliLogo">
                    <i class="iconfont icon-tijiao question_ali_icon"></i>
                    Publish Comment
                </h4>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
                <!--回复输入框-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment_section">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object img-rounded" th:src="${session.user!= null ? session.user.avatarUrl:'/images/default-avatar.png'}">
                            </a>

                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${session.user!= null ? session.user.name:'anonymous user'}"> </span>
                            </h5>
                        </div>
                    </div>
                    <input type="hidden" id="question_id" th:value="${question.id}">
                    <textarea class="form-control comment" rows="7" id="comment_content"></textarea>
                    <button type="button" class="btn btn-success btn-comment" onclick="post()">Reply</button>
                </div>
            </div>
        </div>
        <!--右边发起人-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 class="question-AliLogo">
                    <i class="iconfont icon-heike question_ali_icon"></i>
                    <span>Sponsor</span>
                </h3>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-rounded" th:src="${question.user.avatarUrl}">
                        </a>

                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${question.user.name}"> </span>
                        </h5>
                    </div>
                </div>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 page-right-line">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4 class="history-head">
                    <span class="glyphicon glyphicon-hourglass"></span>
                    browsing history
                </h4>
                <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 history_tag_list" th:if="${session.user!=null}">
                    <span class="label history_label_info history_tag_list" th:each="history : ${questionHistory}">
                         <a th:if="${history!=null}" th:href="@{'/question/'+ ${history.id}}" >
                          <span class="glyphicon glyphicon-tags history_tag_style"></span>
                          <span class="label history_label_info" th:text="${history.title}"></span>
                         </a>
                    </span>
                </div>



            </div>

            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 page-right-line">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <h4>
                    <span class="glyphicon glyphicon-grain"></span>
                    relevant issues
                </h4>

                <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12 history_tag_list">
                    <span class="label history_label_info history_tag_list" th:each="related : ${relatedQuestions}">
                          <a th:href="@{'/question/'+ ${related.id}}" >
                          <span class="glyphicon glyphicon-tags history_tag_style"></span>
                          <span class="label history_label_info" th:text="${related.title}"></span>
                         </a>
                    </span>
                </div>
<!--                <ul class="question-related">-->
<!--                    <li th:each="related : ${relatedQuestions}">-->
<!--                        <a th:href="@{'/question/'+ ${related.id}}" th:text="${related.title}"></a>-->

<!--                    </li>-->
<!--                </ul>-->
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 page-right-line">

        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
</body>
</html>